<template>
  <div>
    <!-- Vant:表单 -->
    <van-form >
      <van-field
        v-model="usrObj.phone"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="usrObj.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button @click="userLogin" round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// Vant 消息通知
import { Notify } from 'vant';
import {userDenglu} from '../../request/api.js'
export default {
   data(){
    return {
      usrObj:{
        phone:'',//帐号
        password:'',//密码
      }
    }
   },
   methods:{
      userLogin(){
            userDenglu(this.usrObj).then(d=>{
              if(d.data.code == 200){  //登录成功
                 Notify({ type: 'success', message: '登录成功' });
                //将服务端返回的数据保存到本地localStorage中：
                localStorage['userInfo'] = JSON.stringify(d.data.list);
                //跳转到商城首页：
                this.$router.push('/shop');
              }else{  //登录失败
                 Notify({ type: 'warning', message: d.data.msg });
              }
            }).catch(e=>{
              console.log(e);
            });
      }
   }
}
</script>

<style>

</style>